{% extends "base.html" %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/cart.css') }}">
{% endblock %}

{% block content %}
<div class="cart-container">
    <h1 class="page-title">我的购物车</h1>

    {% if cart_items %}
    <div class="cart-content">
        <div class="cart-items">
            <div class="cart-header">
                <label class="select-all">
                    <input type="checkbox" id="selectAll">
                    <span>全选</span>
                </label>
                <span class="header-product">商品信息</span>
                <span class="header-price">单价</span>
                <span class="header-quantity">数量</span>
                <span class="header-total">小计</span>
                <span class="header-action">操作</span>
            </div>

            {% for item in cart_items %}
            <div class="cart-item" data-product-id="{{ item.product_id }}">
                <div class="item-select">
                    <input type="checkbox" class="item-checkbox" checked>
                </div>
                <img src="{{ url_for('static', filename='images/products/' + item.image_url) }}" alt="{{ item.name }}">
                <div class="item-info">
                    <h3>{{ item.name }}</h3>
                    <p class="price">￥{{ "%.2f"|format(item.price) }}</p>
                </div>
                <div class="quantity">
                    <button class="quantity-btn minus" data-product-id="{{ item.product_id }}">-</button>
                    <span class="quantity-value">{{ item.quantity }}</span>
                    <button class="quantity-btn plus" data-product-id="{{ item.product_id }}">+</button>
                </div>
                <div class="subtotal">￥{{ "%.2f"|format(item.subtotal) }}</div>
                <button class="remove-btn" data-product-id="{{ item.product_id }}">删除</button>
            </div>
            {% endfor %}
        </div>

        <div class="cart-footer">
            <div class="select-all">
                <input type="checkbox" id="select-all" checked>
                <label for="select-all">全选</label>
            </div>
            <div class="total">
                总计：<span id="cart-total">￥{{ "%.2f"|format(total) }}</span>
            </div>
            <button class="checkout-btn" onclick="showCheckoutModal()">结算</button>
        </div>
    </div>
    {% else %}
    <div class="empty-cart">
        <div class="empty-icon">🛒</div>
        <p>购物车是空的</p>
        <a href="{{ url_for('products') }}" class="go-shopping">去购物</a>
    </div>
    {% endif %}
</div>

<!-- 结算模态框 -->
<div id="checkoutModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <h2>确认订单</h2>
        <div class="order-summary">
            <h3>订单商品</h3>
            <div class="selected-items">
                <!-- 这里会通过 JavaScript 动态填充选中的商品 -->
            </div>
            <div class="order-total">
                总计：<span id="modal-total">￥0.00</span>
            </div>
        </div>
        <div class="shipping-info">
            <h3>收货信息</h3>
            <form id="checkoutForm">
                <div class="form-group">
                    <label for="receiver">收货人</label>
                    <input type="text" id="receiver" name="receiver" required>
                </div>
                <div class="form-group">
                    <label for="phone">联系电话</label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="address">收货地址</label>
                    <textarea id="address" name="address" required></textarea>
                </div>
                <div class="form-group">
                    <label for="note">备注</label>
                    <textarea id="note" name="note"></textarea>
                </div>
                <button type="submit" class="submit-order">提交订单</button>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/cart.js') }}"></script>
{% endblock %}
